<template>
  <div class="container">
    <div class="details-title" v-loading="descLoading">
      <div class="details-top">
        <div
          style="
            margin-right: auto;
            font-weight: 500;
            font-size: 13px;
            color: #000000;
          "
        >
          描述
        </div>
        <div
          v-if="disabled"
          @click.stop="editClick"
          style="
            font-size: 14px;
            color: rgba(94, 94, 94, 1);
            cursor: pointer;
            display: flex;
            align-items: center;
          "
        >
          <img
            style="display: inline-block; margin-right: 3px"
            src="@/assets/wbs/pencil.svg"
            alt=""
          />
          <span style="font-size: 13px; color: #42464e"> 编辑</span>
        </div>
        <div v-if="!disabled">
          <el-button size="small" @click.stop="handleCancel">取消</el-button>
          <el-button size="small" type="primary" @click.stop="handleSure">
            保存
          </el-button>
        </div>
      </div>

      <div class="desc" @click.stop="editClick" v-if="disabled && !remark">
        点此添加描述
      </div>
      <el-input
        v-else
        v-model="remark"
        style="width: 100%"
        placeholder="请输入"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
        :disabled="disabled"
      />
    </div>
    <div class="detail-sub">
      <el-tabs v-model="activeTab" class="tab-title">
        <el-tab-pane name="dynamic">
          <template #label>
            <div
              :class="{ activeTab: Object.is(activeTab, 'dynamic'), tab: true }"
            >
              动态
            </div>
          </template>
          <div class="dynamic">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
              "
              v-if="!props?.detail?.commentVoList?.length"
            >
              暂无数据
            </div>
            <div v-else class="dynamic-container">
              <div
                class="dynamic-item"
                v-for="item in props?.detail?.commentVoList ?? []"
                :key="item.id"
              >
                <div class="dynamic-item-top">
                  <img
                    style="width: 20px; height: 20px; margin-right: 5px"
                    :src="
                      props?.detail?.creatorObject?.[item.id]?.avatar ??
                      'https://api.dicebear.com/7.x/avataaars/svg?seed=CurrentUser'
                    "
                    alt="用户头像"
                  />
                  <div style="margin-right: 5px">
                    {{ item.creatorName ?? "rowan" }}
                  </div>
                  <span style="font-size: 12px; color: #86909c">{{
                    item.modifyTime ?? item.createTime
                  }}</span>
                </div>
                <div
                  style="margin: 0px 0px 0px 25px; padding: 0px"
                  v-html="item.actionDetail['property1']"
                ></div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="comment">
          <template #label>
            <div
              :class="{ activeTab: Object.is(activeTab, 'comment'), tab: true }"
            >
              评论({{ commentVoList?.length ?? 0 }})
            </div>
          </template>
          <div class="comment">
            <div class="comment-container">
              <div
                class="comment-item"
                v-for="item in commentVoList ?? []"
                :key="item.id"
              >
                <div class="comment-item-top">
                  <img
                    :src="
                      props?.detail?.creatorObject?.[item.id]?.avatar ??
                      'https://api.dicebear.com/7.x/avataaars/svg?seed=CurrentUser'
                    "
                    alt="用户头像"
                  />
                  <div>{{ item.creatorName ?? "rowan" }}</div>
                </div>
                <div
                  style="margin: 0px 0px 0px 32px; padding: 0px"
                  v-html="item.textDetail"
                ></div>
                <div
                  class="comment-footer"
                  @mouseenter="mouseenter(item)"
                  @mouseleave="mouseleave"
                >
                  <div class="comment-footer-item">
                    <img
                      style="display: inline-block; margin-right: 3px"
                      src="@/assets/wbs/date.svg"
                      alt=""
                    />
                    <span>{{ item.modifyTime ?? item.createTime }}</span>
                  </div>
                  <div
                    style="cursor: pointer"
                    class="comment-footer-item"
                    v-show="activeCommentId === item.id"
                  >
                    <img
                      style="display: inline-block; margin-right: 3px"
                      src="@/assets/wbs/answer.svg"
                      alt=""
                    />
                    <span>回复</span>
                  </div>
                  <div
                    @click="handleCommentDelte(item.id)"
                    style="cursor: pointer"
                    class="comment-footer-item"
                    v-show="activeCommentId === item.id"
                  >
                    <img
                      style="display: inline-block; margin-right: 3px"
                      src="@/assets/wbs/delete.svg"
                      alt=""
                    />
                    <span>删除</span>
                  </div>
                </div>
              </div>
            </div>
            <CommentEditor @submit="submit" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from "vue";
  const props = defineProps([
    "record",
    "userName",
    "endDate",
    "beganDate",
    "detail",
    "asyncData",
  ]);
  import {
    editTask,
    saveComment,
    deleteComment,
    getTaskDetail,
    getReplyList,
  } from "./api.ts";
  import CommentEditor from "../CommentEditor.vue";
  console.log(props.detail, "ddddddddd");

  const remark = ref(props?.detail?.remark ?? "");
  const disabled = ref(true);
  const activeTab = ref("dynamic");
  const descLoading = ref(false);
  const activeCommentId = ref("");

  const commentVoList = ref(props?.detail?.commentVoList ?? []);

  /**
   * @description 处理刷新问题
   */
  const refresh = async () => {
    try {
      const res = await getTaskDetail(props?.detail?.id);
      remark.value = res?.remark ?? "";
      getCommentList();
    } catch (error) {
    } finally {
    }
  };

  /**
   * @description 获取评论列表
   */
  const getCommentList = async () => {
    try {
      const params = {
        conditions: [
          { field: "projectId", operator: "=", value: props.detail?.projectId },
        ],
        pageNo: 1,
        pageSize: 1000000,
      };
      const res = await getReplyList(params);
      commentVoList.value = res?.result ?? [];
    } catch (error) {}
  };

  /**
   * @description 编辑
   */
  const editClick = () => {
    disabled.value = false;
  };

  /**
   * @description 处理取消
   */
  const handleCancel = () => {
    disabled.value = true;
  };

  /**
   * @description 处理确定
   */
  const handleSure = async () => {
    descLoading.value = true;
    try {
      props.asyncData({ remark: remark.value });
      await editTask({ ...(props?.detail ?? {}), remark: remark.value });
      disabled.value = true;
      refresh();
    } catch (error) {
    } finally {
      descLoading.value = false;
    }
  };

  /**
   * @description 处理编辑评论
   */
  const submit = async (text: string) => {
    try {
      const params = {
        projectId: props.detail?.projectId,
        taskId: props.detail.id,
        textDetail: text,
      };
      await saveComment(params);
      refresh();
    } catch (error) {}
  };

  /**
   * @description 删除评论
   */
  const handleCommentDelte = async (commentId: string) => {
    try {
      await deleteComment(commentId);
      refresh();
    } catch (error) {}
  };

  /**
   * @description 鼠标进入处理
   */
  const mouseenter = (item: any) => {
    activeCommentId.value = item.id;
  };

  /**
   * @description 鼠标离开处理
   */
  const mouseleave = () => {
    activeCommentId.value = "";
  };

  onMounted(() => {
    getCommentList();
  });
</script>

<style scoped lang="scss">
  :deep(.el-tabs.el-tabs--top > .el-tabs__header .el-tabs__nav-wrap:after) {
    height: 0px;
  }
  :deep(
    .el-tabs.el-tabs--top
      > .el-tabs__header
      .el-tabs__nav-scroll
      .el-tabs__nav
      .is-top.el-tabs__item:before
  ) {
    display: none;
  }
  :deep(.el-tabs--border-card > .el-tabs__content) {
    padding: 0px;
  }
  :deep(.el-tabs__nav-wrap:after) {
    height: 0px;
  }
  :deep(.el-tabs__active-bar) {
    height: 0px !important;
  }

  .tab {
    padding: 3px 4px;
    &:hover {
      color: #0c0d0e;
    }
  }
  .activeTab {
    background-color: #f2f2f2;
    color: #0c0d0e;
    border-radius: 4px;
  }
  .container {
    margin-top: 20px;
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 170px);
    padding-right: 10px;
    .details-title {
      box-sizing: border-box;

      .details-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 5px;
      }
      .desc {
        width: 100%;
        height: 52px;
        border-radius: 4px;
        background: rgba(248, 248, 248, 1);
        color: rgba(191, 191, 191, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }
    .detail-sub {
      box-sizing: border-box;
      margin-top: 10px;
      height: calc(100% - 90px);
      .tab-title {
        height: 100%;
        .dynamic {
          box-sizing: border-box;
          height: calc(100vh - 290px);
          overflow-y: auto;
          .dynamic-container {
            overflow: auto;
            font-size: 14px;
            color: #141414;
            margin-bottom: 10px;
            .dynamic-item {
              display: flex;
              flex-direction: column;
              margin-bottom: 5px;
              .dynamic-item-top {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                img {
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  object-fit: cover;
                }
              }
            }
          }
        }
        .comment {
          box-sizing: border-box;
          height: calc(100vh - 290px);
          overflow-y: hidden;
          .comment-container {
            max-height: 120px;
            overflow: auto;
            font-size: 14px;
            color: #141414;
            margin-bottom: 10px;
            .comment-item {
              display: flex;
              flex-direction: column;
              margin-bottom: 5px;
              .comment-item-top {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                img {
                  width: 32px;
                  height: 32px;
                  border-radius: 50%;
                  object-fit: cover;
                }
              }
              .comment-footer {
                height: 20px;
                margin-left: 32px;
                display: flex;
                flex-direction: row;
                align-items: center;
                color: #999999;
                font-size: 12px;

                .comment-footer-item {
                  img {
                    display: block;
                  }
                  display: flex;
                  align-items: center;
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
